[자바스크립트] 객체 반복문 사용하여 배열로 만드는법

Last Modified : 2016-12-22 / Created : 2016-12-22

19,416
View Count

주소 복사하기

객체 타입의 데이터를 사용해 반복문을 만드는 경우... 그리고 특정한 값... 예를 들러 key 또는 value만 반환하여 사용해야하는 경우가 있다. 또한 객체를 사용해 배열을 만들 필요도 있을 것이다. 아래는 이를 수행하는 간략한 방법에 대하여 알아보겠다.

대부분 라이브러리는 다양한 내장함수를 통해 이를 가능케하지만 지원하지 않거나 별도 모듈이 필요한 경우 사용하면 될 것이다. 그럼 아래는 우선 객체를 사용하여 반복문을 하나 만들어보자.

# 객체를 사용하여 반복문 만들기

for, in을 사용한 반복문

var items = {
banana: 50,
apple: 80,
pineapple: 100
}

for (key in items) {
console.log("Fruit name:" + key);
}

위 예제는 for 반복문과 in 키워드를 사용하여 반복문을 만들었다. 이때 객체 내부의 값은 key를 간당하게 콘솔창으로 출력하는 예제이다. 그럼 키가 가진 값을 출력하려면 어떻게할까?

for (key in items) {
console.log("Fruit: "key + " - 가격: " + items[key];
}

위와같이 for문 안에 in 키워드를 사용한다. 이를통해 콘솔로 객체가 가진 키와 값을 출력하여 보았다.

만약 객체의 키값만 사용하여 배열로 만드려면 어떻게할까? 이 역시 간단하다. 만약 키값을 가지게 될 배열을 fruits로 할 경우 아래 예제를 보자.

# 객체에서 배열로 만들기(변환)

var fruits = []; // fruits 배열에 객체의 키 값을 모두 추가

for (key in items) {
fruits.push(key);
}

여기까지 객체의 키와 그 값을 얻는 방법을 for 반복문을 사용하여 알아보았다. 객체의 값을 배열로 변환할 필요가 있을때의 방법으로 보통 데이터를 배열로 넘겨줄 경우에 사용한다.

객체 반복문 object

아래의 글도 찾고 계시지 않나요?

자바스크립트 코딩 스타일 중 알아두면 좋은 것들

자바스크립트 중단점을 활용한 디버깅 방법